<template>
  <div class="container">
    <div class="handle-box">

      <el-row>

        <el-col>
          <el-button type="primary" class="export" icon="el-icon-s-promotion" @click="download">导出成绩单
          </el-button>
        </el-col>
      </el-row>

    </div>

    <div class="title">{{pageName}}</div>


    <el-table :data="userTableData.slice((this.queryUser.currentPage-1)*this.queryUser.pageSize,(this.queryUser.currentPage*this.queryUser.pageSize))"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
              highlight-current-row>
      <el-table-column prop="userId" label="学号/工号" min-width="120" align="center"/>
      <el-table-column  label="姓名" min-width="80" align="center">
        <template slot-scope="{row}">
          {{row.user.name}}
        </template>
      </el-table-column>
<!--      <el-table-column prop="clazz" label="班级" min-width="120" align="center">
        <template slot-scope="{row}">
          {{row.user.clazz}}
        </template>
      </el-table-column>-->
      <el-table-column prop="score" label="得分" min-width="60" align="center"/>
      <el-table-column label="批改状态" min-width="80" align="center">
        <template slot-scope="{row}">
          <el-tag :type="statusTagFormat(row)">
            {{ statusFormat(row)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="300" align="center" >
        <template slot-scope="scope">
          <el-button type="text" :class="scope.row.status !== 1 ? 'editButton2' : 'editButton1'" icon="el-icon-edit" @click="commentPaper(scope.row)">
            <span v-show="scope.row.status !== 1">批改答题卡</span>
            <span v-show="scope.row.status === 1">重改答题卡</span>
          </el-button>
<!--          <el-button type="text" class="editButton2" icon="el-icon-document" @click="checkPaper(scope.row)">查看答题卡
          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="queryUser.currentPage"
                     :page-size="queryUser.pageSize" :total="queryUser.total" @current-change="handleUserChange"/>
    </div>
  </div>
</template>

<script>
  import {
    getAnswersByExamId, queryExamPage, queryUserById
  } from '../../../api';

  import info from '../../../utils/info'
  import answer from '../../../utils/answer'
  export default {
    name: 'ExamInfoEnd',
    data(){
      return{
        /* 考试状态 */
        examId: '',
        status : '',
        paperStatus: 0,
        userTableData: [],
        queryUser: {
          total: 10,
          pageSize: 7,
          currentPage: 1
        },
        userKeyWord: '',
        score: 0,
        page: {
          exampageId: '',
          exampageName: '',
          adviceTime: '',
          createTime: '',
          endTime: '',
          startTime: '',
          choice: [],
          multChoices: [],
          judge: [],
          pack: [],
          bigQuestion: [],
          totalScore: 0
        },
        pageName: '',

      }
    },
    created(){

    },
    mounted(res) {
      let id = this.$route.query.id;
      let status = this.$route.query.status;

      this.status = status;
      this.examId = id;

      /* 根据id查询出试卷,以及试卷所属的考试人员 */
      // 渲染页面
      console.log("examInfoEnd..." + status);
      console.log(id);
      // 0 1 2 未开始,正在进行,已经结束

      this.getData();
    },
    methods: {
      async getData(){

        let id = this.examId;
        console.log(id);
        const data = await getAnswersByExamId({examId:id});
        console.log(data);

        this.userTableData = data.answers;
        this.queryUser.total = data.answers.length;

        const page = await queryExamPage({ id });
        //console.log(page);
        this.pageName = page.examPage.exampageName;
      },
      handleUserChange(val){
        /* 更换当前页 */
        this.$set(this.queryUser, 'currentPage', val);
        /*this.getData();*/
      },
      statusTagFormat(row){
        if(row.status !== 1){
          return 'danger';
        }else{
          return 'success';
        }
      },
      statusFormat(row){

        if(row.status !== 1){
          return '未批改';
        }else{
          return '已批改';
        }
      },

      download(){
        let data = {examId:this.examId};
        this.$axios.request({
          url: '/answer/getScoreEXcel',
          params:{
            "examId": this.examId
          },
          method: 'get',
          responseType: 'blob',
        }).then(res => {
          const data = res.data;
          let url = window.URL.createObjectURL(data);
          let a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = '成绩单.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        })
      },

      /* 批改答题卡 */
      commentPaper(row){
        /* 跳转到批改答题卡的页面 */
        const exampageId = row.exampageId;
        const answerId = row.answerId;

        this.$router.push({path:'/correctPaper',query:{exampageId: exampageId,answerId: answerId,status:'1'}});
      },
      /* 查看答题卡 */
      checkPaper(row){
        /* 跳转到查看答题卡 */
        // 2为查看答题看

        const exampageId = row.exampageId;
        const answerId = row.answerId;
        this.$router.push({path:'/correctPaper',query:{exampageId: exampageId,answerId: answerId,status:'2'}});
      }
    },
    watch:{

    }
  };
</script>

<style scoped>


  .title{
    margin-top: 1%;
    font-size: 30px;
    margin-left: 2%;
    color: gray;
  }
  .table {
    width: 100%;
    font-size: 14px;
    margin-top: 1%;
  }
  .editButton1{
    font-size: 14px;
    color: red;
  }

  .editButton2{
    font-size: 14px;

  }

  .export{
    margin-left: 90%;
  }

  .searchButton{
    margin-left: 10%;
  }

</style>
